<template>
  <view class="page-container">
    <!-- 顶部标题 -->
    <view class="header">
      <view class="title">选择图片导入方式</view>
      <view class="subtitle">选择您喜欢的图片导入方式开始创作</view>
    </view>

    <!-- 导入方式选择 -->
    <view class="import-options">
      <!-- 方式0：使用预设图片 -->
      <view class="option-card" @click="selectPresetImages">
        <view class="option-icon">🎨</view>
        <view class="option-content">
          <view class="option-title">使用预设图片</view>
          <view class="option-desc">使用系统提供的精美预设图片，快速开始创作</view>
        </view>
        <view class="option-arrow">→</view>
      </view>

      <!-- 方式1：从现有展览导入 -->
      <view class="option-card" @click="selectExistingExhibition">
        <view class="option-icon">🖼️</view>
        <view class="option-content">
          <view class="option-title">从现有展览导入</view>
          <view class="option-desc">从您已创建的展览中选择图片进行创作</view>
        </view>
        <view class="option-arrow">→</view>
      </view>

      <!-- 方式2：新建展览后导入 -->
      <view class="option-card" @click="selectNewExhibition">
        <view class="option-icon">➕</view>
        <view class="option-content">
          <view class="option-title">新建展览后导入</view>
          <view class="option-desc">先创建新的展览，再上传图片进行创作</view>
        </view>
        <view class="option-arrow">→</view>
      </view>
    </view>

    <!-- 底部提示 -->
    <view class="footer-tip">
      <text class="tip-text">💡 提示：选择预设图片可以立即开始创作</text>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'

// 页面加载时的参数
let returnData = {}

onLoad((query) => {
  if (query && query.returnData) {
    try {
      returnData = JSON.parse(decodeURIComponent(query.returnData))
      console.log('接收到的返回数据:', returnData)
    } catch (e) {
      console.error('解析返回数据失败', e)
    }
  }
})

// 方式0：使用预设图片
function selectPresetImages() {
  console.log('选择预设图片方式')
  
  // 直接跳转到ImageGenerator，使用预设图片模式
  uni.navigateTo({
    url: '/pages/upload/upload?mode=preset',
    success: () => {
      uni.showToast({
        title: '已选择预设图片模式',
        icon: 'success'
      })
    }
  })
}

// 方式1：从现有展览导入
function selectExistingExhibition() {
  console.log('选择从现有展览导入方式')
  
  // 跳转到展览选择页面
  uni.navigateTo({
    url: '/pages/image-import/exhibition-image-selector',
    success: () => {
      console.log('跳转到展览图片选择页面')
    },
    fail: (err) => {
      console.error('跳转失败:', err)
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    }
  })
}

// 方式2：新建展览后导入
function selectNewExhibition() {
  console.log('选择新建展览后导入方式')
  
  // 跳转到新建展览页面
  uni.navigateTo({
    url: '/pages/footprint/create?mode=import',
    success: () => {
      console.log('跳转到新建展览页面')
    },
    fail: (err) => {
      console.error('跳转失败:', err)
      uni.showToast({
        title: '跳转失败',
        icon: 'none'
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background: #1a1a1a;
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 40px;
  
  .title {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff; /* 深色背景下标题白色 */
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    margin-bottom: 10px;
    letter-spacing: 1px;
  }
  
  .subtitle {
    font-size: 16px;
    color: #e0e0e0; /* 深色背景下副标题浅白 */
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    line-height: 1.5;
  }
}

.import-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 40px;
}

.option-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(245, 242, 237, 0.9));
  border-radius: 20px;
  padding: 25px;
  display: flex;
  align-items: center;
  box-shadow: 0 8px 24px rgba(212, 175, 55, 0.15);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  
  &:active {
    transform: translateY(2px);
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.2);
  }
  
  .option-icon {
    font-size: 32px;
    margin-right: 20px;
    width: 50px;
    text-align: center;
  }
  
  .option-content {
    flex: 1;
    
    .option-title {
      font-size: 20px;
      font-weight: 600;
      color: #222222; /* 浅色卡片内使用深色标题 */
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      margin-bottom: 8px;
      letter-spacing: 0.5px;
    }
    
    .option-desc {
      font-size: 14px;
      color: #666666; /* 浅色卡片内使用深色副标题 */
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      line-height: 1.4;
    }
  }
  
  .option-arrow {
    font-size: 24px;
    color: #333333; /* 浅色卡片内箭头深色 */
    font-weight: bold;
    margin-left: 15px;
  }
}

.footer-tip {
  text-align: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.85); /* 浅色底 */
  border-radius: 15px;
  backdrop-filter: blur(10px);
  
  .tip-text {
    font-size: 14px;
    color: #222222; /* 浅色底上用深色文字 */
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    opacity: 0.9;
  }
}
</style>
